<template>
    <div>
        <div class="info-form">
            <el-form :model="addForm" :inline="true">
                <el-form-item label="所属班级:" v-if="addForm.switch">
                    <el-select v-model="value" placeholder="system" style="width: 120px;" class="goodstype-input">
                        <el-option
                                style="width: 100px;"
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm()" v-if="addForm.switch">提交</el-button>
                    <el-button type="primary" @click="getStu2()">增加学生</el-button>
                </el-form-item>
            </el-form>
            <el-dialog title="增加学生" :visible.sync="dialogTableVisible">
                <el-table
                        ref="multipleTable"
                        :data="stuData"
                        border
                        tooltip-effect="dark"
                        style="width: 100%"
                        @selection-change="handleSelectionChange">
                    <el-table-column
                            type="selection"
                            width="70">
                    </el-table-column>
                    <!--<el-table-column-->
                    <!--label="日期"-->
                    <!--width="120">-->
                    <!--<template scope="scope">{{ scope.row.date }}</template>-->
                    <!--</el-table-column>-->
                    <el-table-column
                            prop="name"
                            label="姓名">
                    </el-table-column>
                    <!--<el-table-column-->
                    <!--prop="address"-->
                    <!--label="地址"-->
                    <!--show-overflow-tooltip>-->
                    <!--</el-table-column>-->
                </el-table>
                <div style="margin-top: 20px">
                    <el-button @click="toggleSelection()">取消选择</el-button>
                    <el-button type="primary" @click="setStu()">提交</el-button>
                </div>
            </el-dialog>
        </div>
        <div>
            <el-table
                    :data="tableData"
                    stripe
                    style="width: 100%">
                <el-table-column
                        prop="name"
                        label="已住人员">
                </el-table-column>
                <!--<el-table-column-->
                <!--prop="size"-->
                <!--label="可住人数">-->
                <!--</el-table-column>-->
                <!--<el-table-column-->
                <!--prop="quantity"-->
                <!--label="已住人数">-->
                <!--</el-table-column>-->
                <!--<el-table-column label="操作">-->
                <!--<template scope="scope">-->
                <!--<el-button @click="handleClick(scope.$index)" type="text" size="small">查看</el-button>-->
                <!--<el-button @click.native.prevent="deleteRow(scope.$index, items)" type="text" size="small"> 删除-->
                <!--</el-button>-->
                <!--</template>-->
                <!--</el-table-column>-->
            </el-table>
        </div>
    </div>
</template>

<script>
    import moment from 'moment';
    export default {
        data() {
            return {
                options: [],
                value: '',
                addForm: {
                    switch: false
                },
                tableData: [],
                tableId:[],
                dialogTableVisible: false,
                stuData: [],
                multipleSelection: []
            }
        },
        activated(){
            this.tableId = [];
            let user = JSON.parse(localStorage.getItem("currentUser"));
            if (user.account == "system") {
                this.addForm.switch = true;
            }
            this.getClass();
            this.getStu();

        },
        methods: {
            submitForm(){
                let self = this;
                let odid = this.$route.query.item.odid;
                let oid = this.value;
                this.$axioxs.post("/dormitories/set?odid=" + odid + "&oid=" + oid)
                    .then(function (res) {
//                        self.get();
                    })
            },
            setStu(){
                let self = this;
                let uids = [];
                let did = this.$route.query.item.id;
                this.multipleSelection.forEach(item => {
                    uids.push(item.id)
                })
                this.$axioxs.post("/dormitories/choice?did=" + did + "&uids=" + uids)
                    .then(function (res) {
                        self.getStu();
                        self.dialogTableVisible = false;
                    })
            },
            getStu(){
                let self = this;
                let did = this.$route.query.item.id;
                this.tableData = [];
                this.$axioxs.get("/dormitories/getStu?did=" + did)
                    .then(function (res) {
                        self.tableData = res.data.records;
                        self.tableData.forEach(item=>{
                            self.tableId.push(item.id);
                        })
                    })
            },
            getStu2(){
                let self = this;
                this.stuData = [];
                this.dialogTableVisible = true;
                this.$axioxs.get("/user/?states=1&kindCode=10")
                    .then(function (res) {
                        var arr = res.data.records;
                        arr.forEach(item => {
                            console.log(self.tableId.indexOf(item.id))
                            if (item.userRoleNames == "学生" && self.tableId.indexOf(item.id) == -1) {
                                self.stuData.push(item)
                            }
                        })
                    })
            },
            getClass(){
                let self = this;
                this.options = []
                this.$axioxs.get("/organ/?states=0,1")
                    .then(function (res) {
                        let i = res.data.records;
                        i.forEach(item => {
                            let j = {}
                            j.value = item.id;
                            j.label = item.name;
                            self.options.push(j);
                        })
                        if (self.$route.query.item) {
                            self.value = self.$route.query.item.organ_id;
                        }

                    })
            },
            handleClick(index) {

            },
            deleteRow(index, rows) {

            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            toggleSelection(rows) {
                if (rows) {
                    rows.forEach(row => {
                        this.$refs.multipleTable.toggleRowSelection(row);
                    });
                } else {
                    this.$refs.multipleTable.clearSelection();
                }
            },
        }
    }
</script>